<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
	layout:decorator="layout/base_page">
<head>
<meta charset="UTF-8" />
<title>无线微功耗气体检测报警系统</title>
<link rel="stylesheet" th:href="@{/css/index.css}" />
<script type="text/javascript" th:src="@{/js/index.js}"></script>

<!-- <script type="text/javascript" th:src="@{/lib/ol.js}"></script>
	<script type="text/javascript" th:src="@{/js/map-location.js}"></script>
	<script type="text/javascript" th:src="@{/lib/ol-plot.js}"></script>
	<script type="text/javascript" th:src="@{/js/measuretool.js}"></script>
	<script type="text/javascript" th:src="@{/js/baiduMap.js}"></script>
	<script type="text/javascript" th:src="@{/js/historyMap.js}"></script> -->
<link rel="stylesheet" th:href="@{/css/esm.css}" />
<script type="text/javascript" th:src="@{/js/hashmap.js}"></script>
<script type="text/javascript" th:src="@{/js/baiduMap.js}"></script>
<script type="text/javascript" th:src="@{/js/tianMap.js}"></script>
<script type="text/javascript" th:src="@{/js/map.js}"></script>
<script type="text/javascript" th:src="@{/js/historyMap.js}"></script>
<script type="text/javascript" th:src="@{/js/utils.js}"></script>
<script type="text/javascript" th:src="@{/js/esm_drag.js}"></script>
<script type="text/javascript" th:src="@{/js/infowindow.js}"></script>
<script type="text/javascript" th:src="@{/js/datepicker/WdatePicker.js}"></script>
<script type="text/javascript" th:src="@{/js/echarts.min.js}"></script>
<script type="text/javascript" th:src="@{/js/esmLayer.js}"></script>
<script type="text/javascript" th:src="@{/js/historyData.js}"></script>


<script data-main="/js/app"
	th:src="@{/webjars/stomp-websocket/stomp.min.js}"></script>
<script th:src="@{/js/device.js}"></script>
</head>
<body>
	<!-- box 地图-->
	<div class="box" layout:fragment="main">
		<div class="img" id="map"></div>
		<!-- 卫星 -->
            <div class="stars" id="starsDiv">
			<!-- 聊天信息显示 -->
            	<div class="position" onclick="moveCenter();"><i class="poIcon"></i></div>
            	<div class="starsWord">
            		<p><i class="plus" onclick="zoom(1)"></i></p>
            		<p><i class="reduce"  onclick="zoom(0)"></i></p>
            	</div>
            	<!-- <div class="starsTxtVideo"><a href="javascript:showBigCamera()">视频</a></div> -->
            	<div class="starsTxt" onclick="showWeiXingTu()">卫星</div>
            	<div class="starsTxt" onclick="showDiTu()">地图</div>
            	<div class="txtNone"></div>
            </div>
		<!-- 隐藏展开单位-->
		<div class="treeHd" style="display: none;" id="tenantUnitDiv">
			<div class="treeHdBox">
				<div class="treeList current">
					<div class="tlTop">川庆钻探单位</div>
					<div class="listSub" style="display: block;">
						<ul>
							<li>
								<div class="second">一警队</div>
								<div class="three">
									<ol>
										<li class="onlink"><span></span>一警队A</li>
										<li><span></span>一警队B</li>
									</ol>
								</div>
							</li>
							<li>
								<div class="second">二警队</div>
								<div class="three" style="display: none;">
									<ol>
										<li><span></span>一警队A</li>
										<li><span></span>一警队B</li>
									</ol>
								</div>
							</li>
							<li>
								<div class="second">三警队</div>
								<div class="three" style="display: none;">
									<ol>
										<li><span></span>一警队A</li>
										<li><span></span>一警队B</li>
									</ol>
								</div>
							</li>
							<li>
								<div class="second">四警队</div>
								<div class="three" style="display: none;">
									<ol>
										<li><span></span>一警队A</li>
										<li><span></span>一警队B</li>
									</ol>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div class="treeList">
					<div class="tlTop">川庆钻探单位</div>
					<div class="listSub" style="display: none;">
						<ul>
							<li>
								<div class="second">一警队</div>
								<div class="three">
									<ol>
										<li><span></span>一警队A</li>
										<li><span></span>一警队B</li>
									</ol>
								</div>
							</li>
							<li>
								<div class="second">二警队</div>
								<div class="three" style="display: none;">
									<ol>
										<li><span></span>一警队A</li>
										<li><span></span>一警队B</li>
									</ol>
								</div>
							</li>
							<li>
								<div class="second">三警队</div>
								<div class="three" style="display: none;">
									<ol>
										<li><span></span>一警队A</li>
										<li><span></span>一警队B</li>
									</ol>
								</div>
							</li>
							<li>
								<div class="second">四警队</div>
								<div class="three" style="display: none;">
									<ol>
										<li><span></span>一警队A</li>
										<li><span></span>一警队B</li>
									</ol>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div class="treeList">
					<div class="tlTop">川庆钻探单位</div>
					<div class="listSub" style="display: none;">
						<ul>
							<li>
								<div class="second">一警队</div>
								<div class="three">
									<ol>
										<li><span></span>一警队A</li>
										<li><span></span>一警队B</li>
									</ol>
								</div>
							</li>
							<li>
								<div class="second">二警队</div>
								<div class="three" style="display: none;">
									<ol>
										<li><span></span>一警队A</li>
										<li><span></span>一警队B</li>
									</ol>
								</div>
							</li>
							<li>
								<div class="second">三警队</div>
								<div class="three" style="display: none;">
									<ol>
										<li><span></span>一警队A</li>
										<li><span></span>一警队B</li>
									</ol>
								</div>
							</li>
							<li>
								<div class="second">四警队</div>
								<div class="three" style="display: none;">
									<ol>
										<li><span></span>一警队A</li>
										<li><span></span>一警队B</li>
									</ol>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div class="treeList">
					<div class="tlTop">川庆钻探单位</div>
					<div class="listSub" style="display: none;">
						<ul>
							<li>
								<div class="second">一警队</div>
								<div class="three">
									<ol>
										<li><span></span>一警队A</li>
										<li><span></span>一警队B</li>
									</ol>
								</div>
							</li>
							<li>
								<div class="second">二警队</div>
								<div class="three" style="display: none;">
									<ol>
										<li><span></span>一警队A</li>
										<li><span></span>一警队B</li>
									</ol>
								</div>
							</li>
							<li>
								<div class="second">三警队</div>
								<div class="three" style="display: none;">
									<ol>
										<li><span></span>一警队A</li>
										<li><span></span>一警队B</li>
									</ol>
								</div>
							</li>
							<li>
								<div class="second">四警队</div>
								<div class="three" style="display: none;">
									<ol>
										<li><span></span>一警队A</li>
										<li><span></span>一警队B</li>
									</ol>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div class="treeList">
					<div class="tlTop">川庆钻探单位</div>
					<div class="listSub" style="display: none;">
						<ul>
							<li>
								<div class="second">一警队</div>
								<div class="three">
									<ol>
										<li><span></span>一警队A</li>
										<li><span></span>一警队B</li>
									</ol>
								</div>
							</li>
							<li>
								<div class="second">二警队</div>
								<div class="three" style="display: none;">
									<ol>
										<li><span></span>一警队A</li>
										<li><span></span>一警队B</li>
									</ol>
								</div>
							</li>
							<li>
								<div class="second">三警队</div>
								<div class="three" style="display: none;">
									<ol>
										<li><span></span>一警队A</li>
										<li><span></span>一警队B</li>
									</ol>
								</div>
							</li>
							<li>
								<div class="second">四警队</div>
								<div class="three" style="display: none;">
									<ol>
										<li><span></span>一警队A</li>
										<li><span></span>一警队B</li>
									</ol>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div class="treeList">
					<div class="tlTop">川庆钻探单位</div>
					<div class="listSub" style="display: none;">
						<ul>
							<li>
								<div class="second">一警队</div>
								<div class="three">
									<ol>
										<li><span></span>一警队A</li>
										<li><span></span>一警队B</li>
									</ol>
								</div>
							</li>
							<li>
								<div class="second">二警队</div>
								<div class="three" style="display: none;">
									<ol>
										<li><span></span>一警队A</li>
										<li><span></span>一警队B</li>
									</ol>
								</div>
							</li>
							<li>
								<div class="second">三警队</div>
								<div class="three" style="display: none;">
									<ol>
										<li><span></span>一警队A</li>
										<li><span></span>一警队B</li>
									</ol>
								</div>
							</li>
							<li>
								<div class="second">四警队</div>
								<div class="three" style="display: none;">
									<ol>
										<li><span></span>一警队A</li>
										<li><span></span>一警队B</li>
									</ol>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<!-- 实时数据 -->
		<div class="realtime" onclick="showRealTimeDiv()">
			<p>实</p>
			<p>时</p>
			<p>数</p>
			<p>据</p>
		</div>
		<div class="openData" id="realTimeDiv">
			<div class="title ca cf" id="realTimeDivTop">
				<div class="fl tlHeader">实时数据</div>
				<div class="fl switchBox">
					<span class="witch"> <label class="switch-btn"> <input
							id="device-switch" class="checked-switch" type="checkbox">
							<span class="text-switch" data-yes="yes" data-no="no"></span> <span
							class="toggle-btn"></span>

					</label>
					</span>
				</div>
				<div class="fl tlHeader">云端推送</div>
				<div class="fl switchBox">
					<span class="witch"> <label class="switch-btn"> <input
							id="cloud-push-switch" class="checked-switch" type="checkbox">
							<span class="text-switch" data-yes="yes" data-no="no"></span> <span
							class="toggle-btn"></span>

					</label>
					</span>
				</div>
				<!-- <div class="fl synchro" onclick="openSyncModal()">
					<svg class="bi bi-cloud-upload" width="2em" height="2em"
						viewBox="0 0 16 16" fill="currentColor"
						xmlns="http://www.w3.org/2000/svg">
						  <path
							d="M4.887 6.2l-.964-.165A2.5 2.5 0 1 0 3.5 11H6v1H3.5a3.5 3.5 0 1 1 .59-6.95 5.002 5.002 0 1 1 9.804 1.98A2.501 2.501 0 0 1 13.5 12H10v-1h3.5a1.5 1.5 0 0 0 .237-2.981L12.7 7.854l.216-1.028a4 4 0 1 0-7.843-1.587l-.185.96z" />
						  <path fill-rule="evenodd"
							d="M5 8.854a.5.5 0 0 0 .707 0L8 6.56l2.293 2.293A.5.5 0 1 0 11 8.146L8.354 5.5a.5.5 0 0 0-.708 0L5 8.146a.5.5 0 0 0 0 .708z"
							clip-rule="evenodd" />
						  <path fill-rule="evenodd"
							d="M8 6a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0v-8A.5.5 0 0 1 8 6z"
							clip-rule="evenodd" />
					</svg>
					同步数据图
					<div class="loading">
						<div class="loadingDiv">
						    <div class="left"></div>
						    <div class="right"></div>
						    <div class="progress">60%</div>
						</div>
					</div>
				</div> -->
				
				<a id="device-option-button" class="fl fit" href="#"><img
					th:src="@{/icons/gear-fill.svg}" /></a>
				<div class="retract" onclick="closeRealTimeDiv()">
					<svg class="bi bi-chevron-double-left" width="1.4em" height="1.4em"
						viewBox="0 0 16 16" fill="currentColor"
						xmlns="http://www.w3.org/2000/svg">
					  <path fill-rule="evenodd"
							d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"
							clip-rule="evenodd" />
					  <path fill-rule="evenodd"
							d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"
							clip-rule="evenodd" />
					</svg>
				</div>
			</div>
			<div class="time" style="color: #fff; font-weight: bold;">
				<span id="device-state" class="green" style="background-color: #49d58b; width: 12px; height: 12px; display: inline-block; border-radius: 100%; margin: 0 2px 0 auto;">
				</span>
				<span id="device-name">未知</span> 电量:<span id="device-voltage">0</span>V
				版本:<span id="device-version">未知</span>
			</div>
			<div style="border-bottom: 1px solid #56798e; margin: 0 20px 0 20px;"></div>
			<div id="device-update-time" class="time">更新时间:</div>
			<div style="border-bottom: 1px solid #56798e; margin: 0 20px 0 20px;"></div>
			<div>
				<p style="color:#fff;float: left"><input type="checkbox" checked id="cb_alarm_audio"/><label>告警声音</label><p>
				<p style="color:#fff;float: right"><input type="checkbox" id="cb_edit_device_pos"/><span>编辑位置</span><p>
			</div>
         	<audio id="alarm_audio" loop="true"> 
         		<source src="../wav/jc.mp3" type="audio/mp3" />
         	</audio>
			<div class="gas">
				<table id="sensor-info-panel" cellpadding="0" cellspacing="0"
					border="0" width="100%" class="gasTab">
					<thead>
						<tr>
							<th><span></span></th>
							<th>设备号</th>
							<th>气体类型</th>
							<th>浓度</th>
							<th>位置</th>
							<th>3m均值</th>
							<th>定位</th>
						</tr>
					</thead>
					<!-- 表格头部固定，内容滚动，则需要js计算tbody距离屏幕的高度 -->
					<tbody>
						<!-- <tr>
            				<td><span class="green"></span></td>
            				<td>001</td>
            				<td>CO2</td>
            				<td>28.88% LEL</td>
            			</tr> -->
					</tbody>
				</table>
			</div>
		</div>
		<!-- 模态框（Modal） -->
		<div class="modal fade gasMain" id="syncModal" tabindex="-1"
			data-backdrop="static" role="dialog" aria-labelledby="myModalLabel"
			aria-hidden="true">
			<div class="modal-dialog" style="background-color: #000;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">同步数据</h4>
					</div>
					<div class="modal-body">
						<div>
							<div class="gasTabs ca cf w1250">
								<div class="term ca cf mb10 fl">
									<div class="timeBox fl w90" style="color: #000">选择时间：</div>
									<div class="starTime fl">
										<div class="timeFrom">
											<input id="syncStartTime" style="color: #000" class="inday"
												onFocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd HH:mm:ss'})" />
										</div>
									</div>
									<div class="fl timeBox mlr10">-</div>
									<div class="endTime fl">
										<div class="timeFrom">
											<input id="syncEndTime" style="color: #000" class="inday"
												onFocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd HH:mm:ss'})" />
										</div>
									</div>
								</div>
								<div class="term ca cf mb10 fl">
									<div class="query fl" onclick="startSync();">
										<a><span class="inquiry"><img
												src="/icons/inquiry.svg" /></span>同步</a>
									</div>
								</div>
							</div>
							<h4 class="modal-title" id="progressTitle">同步进度(0/0)</h4>
							<br>
							<div id="progress" class="progress">
								<div id="progress_rate" aria-valuenow="0" aria-valuemin="0"
									aria-valuemax="100"
									class="progress-bar progress-bar-success progress-bar-striped active"
									role="progressbar" style="width: 0%">
									<span style="color: #000" id="percent">0%</span>
								</div>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal -->
		</div>

		<!-- 历史数据 -->
		<div class="history" id="historyRealTimeDiv" style="display: none">
			<div class="title">
				<div class="tlHeader">历史数据</div>
				<div class="retractLeft" onclick="closeHistoryRealTimeDiv()">
					<svg class="bi bi-chevron-double-right" width="1.4em"
						height="1.4em" viewBox="0 0 16 16" fill="currentColor"
						xmlns="http://www.w3.org/2000/svg">
						  <path fill-rule="evenodd"
							d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"
							clip-rule="evenodd" />
						  <path fill-rule="evenodd"
							d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"
							clip-rule="evenodd" />
						</svg>
				</div>
			</div>
			<div class="data">
				<ul id="historyDataDetailUlId">
					<li id="gasLiId" class="bordL onlike">气体数据</li>
					<li class="bordR">气体图表</li>
				</ul>
			</div>
			<!-- 气体数据 -->
			<div id="gasHistoryDataDivId" class="gasMain" style="display: block">
				<!-- 查询条件 -->
				<div class="gasTabs ca cf">
					<div class="term ca cf mb10 fl">
						<div class="timeBox fl w90">选择时间：</div>
						<div class="starTime fl">
							<div class="timeFrom">
								<input id="historyGasDataStartTime" class="inday"
									onFocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd HH:mm:ss'})" />
							</div>
						</div>
						<div class="fl timeBox mlr10">-</div>
						<div class="endTime fl">
							<div class="timeFrom">
								<input id="historyGasDataEndTime" class="inday"
									onFocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd HH:mm:ss'})" />
							</div>
						</div>
					</div>
					<div class="term ca cf mb10 fl">
						<div class="timeBox fl w90">设备编号：</div>
						<div class="fl">
							<div class="treedeviceID">
								<div class="treeTop"
									onclick="controlHistoryGasDataDeviceSelect(1)">
									<i id="historyGasDataDeviceSelectId" class="sbNumber"></i> <span
										class="downArr"></span>
								</div>
								<div id="historyGasDataDeviceSelectDiv" class="option zindex"
									style="display: none">
									<ul>
										<li name="">全部</li>
										<th:block th:each="code : ${sensorAddressList}">
											<li th:name="${code}" th:text="${code}"></li>
										</th:block>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<div class="term ca cf mb10 fl">
						<div class="query fl" onclick="downLoadHistoryGasDataFn();">
							<a><span class="outIcon"><img src="/icons/export.svg" /></span>导出数据</a>
						</div>
					</div>
					<div class="term ca cf mb10 fl">
						<div class="query fl" onclick="qryHistoryGasDataFn();">
							<a><span class="inquiry"><img src="/icons/inquiry.svg" /></span>查询</a>
						</div>
					</div>
				</div>
				<!-- 查询结果 -->
				<div class="resultTable">
					<table cellpadding="0" cellspacing="0" border="0" width="100%"
						class="gasList">
						<thead>
							<tr>
								<th>序号</th>
								<th>时间</th>
								<th>设备编号</th>
								<th>气体名称</th>
								<th>浓度值</th>
								<th>报警描述</th>
							</tr>
						</thead>
						<tbody id="historyGasDataTableBoby">
						</tbody>
					</table>
				</div>
				<!-- 分页 -->
				<div class="gasPage" id="historyGasDataPage"></div>
			</div>
			<!-- 气体图表 -->
			<div id="gasHistoryChartDivId" class="gasMain chart"
				style="display: none;">
				<!-- 查询条件 -->
				<div class="gasTabs ca cf w1250">
					<div class="term ca cf mb10 fl">
						<div class="timeBox fl w90">选择时间：</div>
						<div class="starTime fl">
							<div class="timeFrom">
								<input id="historyGasChartStartTime" class="inday"
									onFocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd HH:mm:ss'})" />
							</div>
						</div>
						<div class="fl timeBox mlr10">-</div>
						<div class="endTime fl">
							<div class="timeFrom">
								<input id="historyGasChartEndTime" class="inday"
									onFocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd HH:mm:ss'})" />
							</div>
						</div>
					</div>
					<div class="term ca cf mb10 fl">
						<div class="query fl" onclick="getHistoryGasChartFn('qry');">
							<a><span class="inquiry"><img src="/icons/inquiry.svg" /></span>查询</a>
						</div>
					</div>
				</div>
				<!-- 查询结果 -->
				<div class="chartDiv ca cf">
					<div id="historyGasChartDeviceDiv" class="chartDivLeft fl">
						<dl id="historyGasChartDl">
							<dt>
								<i></i>设备编号
							</dt>
							<th:block th:each="code : ${sensorAddressList}">
								<dd th:name="${code}" th:text="${code}"></dd>
							</th:block>
						</dl>
					</div>
					<div id="historyGasChartImgDiv" class="chartDivRight"></div>
				</div>
			</div>
		</div>
		<!-- 安防物资 -->
		<div class="material" onclick="showAfwzDiv()">
			<p>安</p>
			<p>防</p>
			<p>物</p>
			<p>资</p>
		</div>
		<div class="materialData" id="afwzDiv" style="display: none">
			<div class="mdTop">
				安防物资情况表 <span class="stop" onclick="closeAfwzDiv()"> <svg
						class="bi bi-chevron-double-right" width="1.4em" height="1.4em"
						viewBox="0 0 16 16" fill="currentColor"
						xmlns="http://www.w3.org/2000/svg">
					  <path fill-rule="evenodd"
							d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"
							clip-rule="evenodd" />
					  <path fill-rule="evenodd"
							d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"
							clip-rule="evenodd" />
					</svg>
				</span>
			</div>
			<div class="materialList">
				<table cellpadding="0" cellspacing="0" border="0" width="100%"
					class="materialTab">
					<thead>
						<tr>
							<th></th>
							<th></th>
							<th></th>
							<th colspan="2">状态</th>
							<th colspan="2">送检</th>
						</tr>
						<tr>
							<th>序号</th>
							<th>名称</th>
							<th>数量</th>
							<th>正常</th>
							<th>非正常</th>
							<th>到期</th>
							<th>未到期</th>
						</tr>
					</thead>
					<!-- 表格头部固定，内容滚动，则需要js计算tbody距离屏幕的高度 -->
					<tbody id="assetDataTableBoby">
					</tbody>
				</table>
			</div>
		</div>
		<!-- 设置弹出框 -->
		<div id="device-option-panel" class="frameWarp" style="display: none;">
			<div class="videoBox cf ca">
				<div class="videoMain fl">
					<div class="videoNav" id="videoNavSPPZ">
						<ul>
							<li class="onActive"><a href="javascript:void(0);"><i></i><span>端口设置</span></a></li>
						</ul>
					</div>
					<!--openIcon开     shutIcon关  样式切换-->
					<!-- <div class="onOff">
						<i class="openIcon"></i>
					</div> -->
				</div>
				<div class="contBox" style="display: block;">
					<div class="testing">
						<div class="gas ca cf mb20">
							<label class="fl label line34">串口：</label>
							<div class="fl mouth">
								<div class="selHd" id="device-port">
									<i id="device-port-select-value"></i> <span class="pgDn"></span>
								</div>
								<div class="selTion" id="device-port-selTion"
									style="display: none;">
									<ul id="device-port-select-option">
									</ul>
								</div>
							</div>
						</div>
						<div class="ca cf liDiv mb20">
							<label class="label fl line34">时间间隔：</label>
							<div class="inBox">
								<input type="text" id="time-interval" value="" class="txtc" />
							</div>
							<span class="secs">秒</span>
						</div>
					</div>
					<div id="device-option-panel-cancel" class="btnDiv">
						<a>取消</a><a id="save-device-port">保存</a>
					</div>
				</div>
			</div>
			<!--关闭  -->
			<div id="device-option-panel-close" class="closeUp">
				<i> <svg class="bi bi-x" width="2em" height="2em"
						viewBox="0 0 16 16" fill="currentColor"
						xmlns="http://www.w3.org/2000/svg">
					  <path fill-rule="evenodd"
							d="M11.854 4.146a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708-.708l7-7a.5.5 0 0 1 .708 0z"
							clip-rule="evenodd" />
					  <path fill-rule="evenodd"
							d="M4.146 4.146a.5.5 0 0 0 0 .708l7 7a.5.5 0 0 0 .708-.708l-7-7a.5.5 0 0 0-.708 0z"
							clip-rule="evenodd" />
					</svg>
				</i>
			</div>
		</div>
		<script th:inline="javascript">
			var deviceId = [[${deviceId}]];
		</script>
	</div>
</body>
</html>